/***********************布局***********************/
.flex {
  display: flex;
}
.flex-J-SB {
  display: flex;
  justify-content: space-between;
}
.flex-J-SA {
  display: flex;
  justify-content: space-around;
}
.flex-J-SE {
  display: flex;
  justify-content: space-evenly;
}
.flex-A-C {
  display: flex;
  align-items: center;
  align-content: center;
}
.flex-J-C {
  display: flex;
  justify-content: center;
  justify-items: center;
}
.flex-A-B {
  display: flex;
  align-items: baseline;
  align-content: baseline;
}
.flex-col {
  display: flex;
  flex-direction: column;
}

.T-A-L {
  text-align: left;
}
.T-A-C {
  text-align: center;
}
.T-A-R {
  text-align: right;
}
/***********************间距***********************/
// 定义间距映射
$gaps: (
  xs: var(--gap-xs),
  sm: var(--gap-sm),
  md: var(--gap-md),
  lg: var(--gap-lg),
  xl: var(--gap-xl),
  xxl: var(--gap-xxl),
  0: 0,
);

// 循环生成样式
@each $key, $value in $gaps {
  .MT-#{$key} {
    margin-top: $value !important;
  }
  .ML-#{$key} {
    margin-left: $value !important;
  }
  .MR-#{$key} {
    margin-right: $value !important;
  }
  .MB-#{$key} {
    margin-bottom: $value !important;
  }
  .MG-#{$key} {
    margin: $value !important;
  }
  .PT-#{$key} {
    padding-top: $value !important;
  }
  .PL-#{$key} {
    padding-left: $value !important;
  }
  .PR-#{$key} {
    padding-right: $value !important;
  }
  .PB-#{$key} {
    padding-bottom: $value !important;
  }
  .PD-#{$key} {
    padding: $value !important;
  }
}
